import React, { FC, useState } from 'react'
import { Form, Input } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { reg } from '../utils/validate'

const InputPass: FC<any> = ({
    name,
    label,
    rules,
    placeholder,
    dependencies,
    disabled,
}) => {
    const [visible, setVisible] = useState(false)
    return (
        <Form.Item
            name={name}
            label={label}
            hasFeedback
            dependencies={dependencies}
            rules={[
                { required: true },
                {
                    pattern: reg.pwd,
                    message: '请输入正确的密码(6-16的数字字母组合)'
                },
                ...rules
            ]}
            extra={
                <div style={{}}>
                    {!visible ? (
                        <EyeInvisibleOutline onClick={() => setVisible(true)} />
                    ) : (
                        <EyeOutline onClick={() => setVisible(false)} />
                    )}
                </div>
            }
        >
            <Input disabled={disabled} placeholder={placeholder} clearable type={visible ? 'text' : 'password'} />
        </Form.Item>
    )
}

InputPass.defaultProps = {
    rules: []
}

export default InputPass